<!--
 * @Author: xiawei.lv
 * @Date: 2021-07-31 10:02:11
 * @Description: 权限列表页面
 * @FilePath: \GoodsManagement\src\pages\RoleList.vue
-->
<template>
  <div class="app">
    <n-card>
      <n-button
        type="info"
        style="margin-bottom: 20px; padding: 20px 30px; border-radius: 5px"
        @click="addRole"
        >添加角色</n-button
      >
      <n-data-table
        :max-height="450"
        :columns="columns"
        :data="data"
        :single-line="false"
      >
      </n-data-table>
    </n-card>
  </div>
</template>
<script lang="ts">
import {
  NCard,
  NDataTable,
  NButton,
  useDialog,
  useMessage,
  NTag,
  NDialog,
  NDialogProvider,
} from "naive-ui";
import { roles } from "../commonLogical/rolePermissions/rolePermissionsLogical";
import { ref, h, reactive, render } from "vue";
import AddRole from "./children/AddRole.vue";
import EditRole from "./children/EditRole.vue"

export default {
  components: {
    NCard,
    NDataTable,
    NButton,
    h,
    NTag,
    AddRole,
  },
  setup() {
    let data = reactive(roles);
    const dialog = useDialog();

    const columns = reactive([
      {
        // 展开页
        type: "expand",
        renderExpand: (rowData: any) => {
          const tags = rowData.executablePermission.map(
            (Permission: string) => {
              return h(
                NTag,
                {
                  style: {
                    marginRight: "6px",
                  },
                  type: "warning",
                },
                {
                  default: () => Permission,
                }
              );
            }
          );
          return tags;
        },
      },
      {
        // ID
        title: "#",
        key: "",
        width: 50,
      },
      {
        title: "角色名称",
        key: "name",
      },
      {
        title: "角色描述",
        key: "description",
      },
      {
        title: "操作",
        key: "",
        render(row: any) {
          return [
            h(
              // 编辑角色
              NButton,
              {
                style: {
                  fontSize: "12px",
                  padding: "0px 20px",
                  marginRight: "10px",
                },
                type: "info",
                size: "small",
                onClick: () => {
                  editRole(row);
                },
              },
              {
                default: () => "编辑",
              }
            ),
            h(
              // 分配权限
              NButton,
              {
                style: {
                  fontSize: "12px",
                  padding: "0px 20px",
                  marginRight: "10px",
                },
                type: "warning",
                size: "small",
                onClick: () => {
                  assignPermissions(row);
                },
              },
              {
                default: () => "分配权限",
              }
            ),
            h(
              // 删除角色
              NButton,
              {
                style: {
                  fontSize: "12px",
                  padding: "0px 20px",
                },
                type: "error",
                size: "small",
                onClick: () => {
                  delRole(row);
                },
              },
              {
                default: () => "删除",
              }
            ),
          ];
        },
      },
    ]);

    // 修改角色
    const editRole = (row: any) => {
      dialog.warning({
        title: "修改角色信息",
        negativeText: "取消",
        positiveText: "确定",
        onPositiveClick: () => {
          console.log(row);
        },
        content: () => {
          return h(EditRole);
        },
      });
    };

    // 添加角色
    const addRole = (row: any) => {
      dialog.success({
        title: "添加角色",
        negativeText: "取消",
        positiveText: "确定",
        onPositiveClick: () => {
          // addRoleData(row)
        },
        content: () => {  
          return h(AddRole);
        },
      });
    };
    //分配权限
    const assignPermissions = (row: any) => {
      dialog.success({
        title: "分配权限",
        negativeText: "取消",
        positiveText: "确定",
        onPositiveClick: () => {
          alert("d");
        },
        content: () => {
          return h(NButton);
        },
      });
    };
    //删除角色
    const delRole = (row: any) => {
      dialog.warning({
        title: "提示",
        negativeText: "取消",
        positiveText: "确定",
        onPositiveClick: () => {
          alert("d");
        },
        content: () => {
          return h(NButton);
        },
      });
    };

    return {
      data,
      columns,
      addRole,
      render,
      editRole,
      assignPermissions,
      delRole,
    };
  },
};
</script>
<style></style>
